{% extends 'base.html' %}

{% block title %}我的订单 - 花店订单系统{% endblock %}

{% block content %}
<div class="container">
    <div class="row mb-4">
        <div class="col">
            <h2 class="float-start">我的订单</h2>
            <form class="float-end" method="get" action="{% url 'orders:order_list' %}">
                <div class="input-group">
                    <input type="text" class="form-control" name="q" value="{{ query }}" 
                           placeholder="搜索商品名称、地址、电话...">
                    <button class="btn btn-outline-primary" type="submit">搜索</button>
                </div>
            </form>
        </div>
    </div>
    
    {% if orders %}
        <div class="table-responsive">
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th>订单号</th>
                        <th>商品</th>
                        <th>数量</th>
                        <th>总价</th>
                        <th>状态</th>
                        <th>收货地址</th>
                        <th>联系电话</th>
                        <th>创建时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    {% for order in orders %}
                        <tr>
                            <td>{{ order.id }}</td>
                            <td>{{ order.product.name }}</td>
                            <td>{{ order.quantity }}</td>
                            <td>¥{{ order.total_price }}</td>
                            <td>
                                <span class="badge {% if order.status == 'pending' %}bg-warning
                                      {% elif order.status == 'paid' %}bg-info
                                      {% elif order.status == 'shipped' %}bg-primary
                                      {% elif order.status == 'completed' %}bg-success
                                      {% else %}bg-danger{% endif %}">
                                    {{ order.get_status_display }}
                                </span>
                            </td>
                            <td>{{ order.address }}</td>
                            <td>{{ order.phone }}</td>
                            <td>{{ order.created_at|date:"Y-m-d H:i" }}</td>
                            <td>
                                {% if order.status == 'pending' %}
                                    <form method="post" action="{% url 'orders:delete_order' order.pk %}" 
                                          style="display: inline;"
                                          onsubmit="return confirm('确定要取消这个订单吗？');">
                                        {% csrf_token %}
                                        <button type="submit" class="btn btn-danger btn-sm">取消订单</button>
                                    </form>
                                {% endif %}
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    {% else %}
        <div class="alert alert-info">
            {% if query %}
                没有找到匹配的订单。<a href="{% url 'orders:order_list' %}">查看所有订单</a>
            {% else %}
                您还没有任何订单。<a href="{% url 'products:product_list' %}">去购物</a>
            {% endif %}
        </div>
    {% endif %}
</div>

<style>
    /* 搜索框样式 */
    .input-group {
        max-width: 300px;
    }
    
    /* 表格样式 */
    .table {
        font-size: 0.9rem;
    }
    
    /* 状态标签样式 */
    .badge {
        font-size: 0.8rem;
        padding: 0.4em 0.6em;
    }
    
    /* 按钮样式 */
    .btn-sm {
        font-size: 0.8rem;
        padding: 0.25rem 0.5rem;
    }
    
    /* 表格响应式处理 */
    @media (max-width: 768px) {
        .table {
            font-size: 0.8rem;
        }
        
        .badge {
            font-size: 0.7rem;
        }
        
        .btn-sm {
            font-size: 0.7rem;
        }
        
        .input-group {
            max-width: 100%;
            margin-top: 1rem;
        }
    }
</style>
{% endblock %} 